
import React from 'react';
import {
    View,
    Text,
    Image,
    Dimensions,
    TouchableOpacity,
    StyleSheet,
    TextInput,
}from 'react-native'
import BasePage from '../BasePage'
import {Theme, NavigationPage,TeaNavigator, ListRow, NavigationBar, Label, Toast} from 'teaset';
import CommonStyle from '../CommonStyle'
import QRScannerViewPage from './QRScannerViewPage'
export default class GateWayPage extends BasePage{
    constructor(props){
        super(props);
        this.state={
            gateWayCode:'',
            identifitionCode:'',
            password:''
        }
    }
    renderNavigationBar() {
        return (
            <NavigationBar
                title={'绑定网关'}
                backgroundColor='#4195D5'
                leftView={ <NavigationBar.BackButton  onPress={() => this.navigator.pop()} />}
            />
        );
    }
    renderPage(){
        return (
            <View style={{flex:1, backgroundColor:'#dadada'}}>
                <View style={{backgroundColor:'white',marginTop:CommonStyle.statusBarAndNavigationBarH+10, height:50 ,flexDirection:'row',width:'100%'}}>
                    <Text style={{marginTop:20,marginLeft:15,}}>(扫描)网关号</Text>
                    <TextInput style={{marginLeft:20,marginTop:8, width:140}} placeholder={'请输入网关'} onChangeText={(text)=> {
                        this.setState({gateWayCode:text})
                    }} ></TextInput>
                    <TouchableOpacity style={{marginTop:10, width:32,height:32, position:'absolute',right:10}} onPress={()=>{
                        this.navigator.push({view:<QRScannerViewPage />})
                    }}>
                        <Image source={require('../images/scan.png')}></Image>
                    </TouchableOpacity>
                </View>
                <View style={{backgroundColor:'white',marginTop:10, height:50, flexDirection:'row',width:'100%' }}>
                    <Text style={{marginTop:20,marginLeft:15}}>唯一标识码</Text>
                    <TextInput style={{marginTop:8,marginLeft:10,width:140}} placeholder={'请输入唯一标识码'} onChangeText={(text)=>{
                        this.setState({
                            identifitionCode:text
                        })
                    }} ></TextInput>
                    <Image style={{marginTop:10, width:28,height:28, position:'absolute',right:10}} source={require('../images/barcode.png')}></Image>
                </View>
                <View style={{backgroundColor:'white',marginTop:10, height:50, flexDirection:'row',width:'100%'}}>
                    <Text style={{marginLeft:15,marginTop:20}}>密码</Text>
                    <TextInput style={{marginTop:8,marginLeft:10,width:180}} placeholder={'请输入密码'} onChangeText={(text)=>{
                        this.setState({
                            password:text
                        })
                    }} ></TextInput>
                    <Image style={{marginTop:10, width:32,height:32, position:'absolute',right:10}} source={require('../images/lock.png')}></Image>
                </View>
                <Text style={{marginLeft:15,marginTop:30,marginRight:15}}>忘记网关密码可以快按网关SYS键8次，冲刺之后密码为网关ID后6位</Text>
                <TouchableOpacity style={{marginLeft:20,width:CommonStyle.screenwidth-40,height:50,bottom:120,backgroundColor:'white',position:'absolute',borderRadius:6}} onPress={()=>{
                    if(this.state.gateWayCode.length==0){
                        Toast.message('网关号不能为空')
                    }else if(this.state.identifitionCode==0){
                        Toast.message('标识码不能为空')
                    }else if(this.state.password.length==0){
                        Toast.message('密码不能为空')
                    }else{
                        Toast.fail('绑定失败，请检查信息是否对应')
                    }
                }}>
                    <Text style={{textAlign:'center',flex:1,marginTop:15}}>绑定网关</Text>
                </TouchableOpacity>
            </View>
        );
    }
} 